<template>
    <main-layout>
        <main>
        <div class="words"><i>上架我的二手图书</i></div>
        <div class="content">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs14.go007.com%2F2014%2F02%2F20140221%2F635285762328267500.jpg&refer=http%3A%2F%2Fs14.go007.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648631162&t=1cff34c8416f2fd9a172009b7981c177" alt="">
            <div>
                <input type="text" placeholder="图书书名" v-model="booksName">
                <input type="text" placeholder="图书作者" v-model="author">
                <input type="text" placeholder="图片地址" v-model="src">
            </div>
        </div>
        <div class="content">
            <div>
                <input type="text" placeholder="图书价格" v-model="booksPrice">
            </div>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F19%2F03%2F07%2F931cba1f2a018f8ae262f84e0ee6614e.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648639520&t=d8a89d17fef88ddf4468493dc3d59753" alt="">
        </div>
        <van-button type="primary" block @click=pushBooks()>提交图书</van-button>
        </main>
    </main-layout>
</template>
<script>
    import MockService from "../../apis/Ajax";
    export default {
        data() {
            return {
                booksName:'',
                booksPrice:'',
                author:'',
                src:''
            }
        },
        methods:{
            async pushBooks(){
               let result= await MockService.pushbooks(this.booksName,this.booksPrice,this.author,this.src)
               console.log(result);
               this.booksName='',
               this.booksPrice ='',
               this.author ='',
               this.src =''
            }
        }
    }
</script>
<style lang="less" scoped>
    main{
        width: 100%;
        > .words{
            height: 100px;
            background-color: hsl(234, 21%, 74%);
            color:#fff;
            line-height: 100px;
            text-indent: 30px;
        }
        > .content{
            display: flex;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            flex: 1;
            margin-top: 50px;
            > img {
                width: 40%;
                margin-left: 20px;
                margin-right: 20px;
            }
            > div {
                width: 45%;
                > input {
                    margin-top: 10%;
                    border: none;
                    width: 100%;
                    text-indent: 10px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: 10px;
                }
            }
        }
        button{
            margin-top: 100px;
            font-size: 16px;
        }
    }
</style>